<template>
  <div class="transit-detail">
    <div class="detail-header">
      <h2>乘车详情</h2>
      <div class="header-actions">
        <el-button @click="$router.back()">返回</el-button>
      </div>
    </div>

    <div class="detail-content" v-loading="loading">
      <el-descriptions
        v-if="record"
        :column="2"
        border
      >
        <el-descriptions-item label="乘车类型">
          <el-tag :type="record.transitType === 'BUS' ? 'success' : 'primary'">
            {{ record.transitType === 'BUS' ? '公交' : '地铁' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="线路">
          {{ record.lineNumber }}
        </el-descriptions-item>

        <el-descriptions-item label="起始站">
          {{ record.startStation }}
        </el-descriptions-item>

        <el-descriptions-item label="终点站">
          {{ record.endStation }}
        </el-descriptions-item>

        <el-descriptions-item label="开始时间">
          {{ formatDateTime(record.startTime) }}
        </el-descriptions-item>

        <el-descriptions-item label="结束时间">
          {{ record.endTime ? formatDateTime(record.endTime) : '-' }}
        </el-descriptions-item>

        <el-descriptions-item label="乘车时长">
          {{ record.duration ? formatDuration(record.duration) : '-' }}
        </el-descriptions-item>

        <el-descriptions-item label="乘车费用">
          <span v-if="record.amount">¥{{ record.amount.toFixed(2) }}</span>
          <span v-else>-</span>
        </el-descriptions-item>

        <el-descriptions-item label="支付状态">
          <el-tag :type="getPaymentStatusType(record.paymentStatus)">
            {{ getPaymentStatusText(record.paymentStatus) }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="乘车状态">
          <el-tag :type="getStatusType(record.status)">
            {{ getStatusText(record.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div class="action-buttons" v-if="record?.status === 'PENDING_PAYMENT'">
        <el-button type="primary" @click="showPaymentDialog">
          立即支付
        </el-button>
      </div>
    </div>

    <!-- 支付对话框 -->
    <payment-dialog
      v-model="paymentDialogVisible"
      :record="record"
      @payment-success="handlePaymentSuccess"
    />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PaymentDialog from '@/components/payment/PaymentDialog.vue'
import { getTransitRecordById } from '@/api/transit'
import { formatDateTime, formatDuration } from '@/utils/format'

export default {
  name: 'TransitDetail',
  components: {
    PaymentDialog
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const record = ref(null)
    const loading = ref(false)
    const paymentDialogVisible = ref(false)

    // 获取记录详情
    const loadRecord = async () => {
      loading.value = true
      try {
        record.value = await getTransitRecordById(route.params.id)
      } catch (error) {
        ElMessage.error('获取乘车记录详情失败')
        router.back()
      } finally {
        loading.value = false
      }
    }

    // 获取支付状态类型
    const getPaymentStatusType = (status) => {
      const statusMap = {
        PENDING: 'warning',
        PAID: 'success',
        OVERDUE: 'danger'
      }
      return statusMap[status] || 'info'
    }

    // 获取支付状态文本
    const getPaymentStatusText = (status) => {
      const statusMap = {
        PENDING: '待支付',
        PAID: '已支付',
        OVERDUE: '已逾期'
      }
      return statusMap[status] || status
    }

    // 获取状态类型
    const getStatusType = (status) => {
      const statusMap = {
        IN_PROGRESS: 'warning',
        COMPLETED: 'success',
        PENDING_PAYMENT: 'danger',
        PAID: 'success',
        OVERDUE: 'danger'
      }
      return statusMap[status] || 'info'
    }

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        IN_PROGRESS: '进行中',
        COMPLETED: '已完成',
        PENDING_PAYMENT: '待支付',
        PAID: '已支付',
        OVERDUE: '已逾期'
      }
      return statusMap[status] || status
    }

    // 显示支付对话框
    const showPaymentDialog = () => {
      paymentDialogVisible.value = true
    }

    // 处理支付成功
    const handlePaymentSuccess = () => {
      paymentDialogVisible.value = false
      loadRecord()
      ElMessage.success('支付成功')
    }

    onMounted(() => {
      loadRecord()
    })

    return {
      record,
      loading,
      paymentDialogVisible,
      formatDateTime,
      formatDuration,
      getPaymentStatusType,
      getPaymentStatusText,
      getStatusType,
      getStatusText,
      showPaymentDialog,
      handlePaymentSuccess
    }
  }
}
</script>

<style scoped>
.transit-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style> 